<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['system:user:add']">新增版本
            </el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="list" >
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="序号" align="center" prop="id"/>
          <el-table-column label="版本号" align="center" prop="version"/>
          <el-table-column label="创建时间" align="center" prop="createTime" >
          </el-table-column>
          <el-table-column label="强制更新" align="center">
            <template slot-scope="scope">
              <span v-if = 'scope.row.force == 0' style="color: red" >
                <i class="el-icon-circle-close"/>
            </span>
              <span v-else-if = 'scope.row.force == 1' style="color: green">
                <i class="el-icon-circle-check"/>
            </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" prop="isActive" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handlerUpdate(scope.row)"
                         v-hasPermi="['system:user:edit']">编辑
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                         v-hasPermi="['system:user:edit']">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getListData()"/>
      </el-col>
    </el-row>

    <!-- 新增或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body center>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="版本号" prop="version">
              <el-input v-model="form.version" placeholder="请输入版本号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="win地址" prop="downloadUrl">
              <el-input v-model="form.downloadUrl" placeholder="请输入下载地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="mac地址" prop="macDownloadUrl">
              <el-input v-model="form.macDownloadUrl" placeholder="请输入mac下载地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="插件地址" prop="pluginDownloadUrl">
              <el-input v-model="form.pluginDownloadUrl" placeholder="请输入插件下载地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="强制更新" prop="downloadUrl">
              <el-radio v-model="form.force" label="1">是</el-radio>
              <el-radio v-model="form.force" label="0">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="更新内容" prop="remake">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入更新内容"
                v-model="form.remake">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="插件更新内容" prop="pluginRemake">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入插件更新内容"
                v-model="form.pluginRemark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{dialogButtonName}}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    importTemplate,
  } from "@/api/system/user";
  import {codeList, delUser, addCode, detailCode, exportUser, activation, chcekProducts} from "@/api/code"
  import {listData,addVersion,deleteVersion} from "@/api/version/index"
  import {getToken} from "@/utils/auth";

  export default {
    name: "User",
    data() {
      return {
        list: [], //列表
        dialogVisible: false, //详情
        isIndeterminate: true,
        // 遮罩层
        loading: true,
        activationsingle: true,
        activationmultiple: true,
        activationIds: [],
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          version: '',
          downloadUrl: '',
          macDownloadUrl:'',
          pluginDownloadUrl:'',
          remake: '',
          pluginRemark:'',
          force: '0',
          id: undefined
        },
        defaultProps: {
          children: "children",
          label: "label",
        },
        detailDataParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        dialogButtonName:'创 建',
        // 表单校验
        rules: {
          version: [
            {required: true, message: "版本号不能为空", trigger: "blur"},
          ],
          downloadUrl: [
            {required: true, message: "下载地址不能为空", trigger: "blur"},
          ],
          remake: [
            {required: true, message: "请输入更新内容", trigger: "blur"},
          ],
          macDownloadUrl: [
            {required: true, message: "mac下载地址不能为空", trigger: "blur"},
          ],
        },
      };
    },
    watch: {},
    created() {
      this.getListData()
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },

      /** 新增按钮操作 */
      handleAdd() {
        this.open = true;
        this.title = "新增版本";
        this.dialogButtonName = '创 建';
      },
      /** 更新操作*/
      handlerUpdate(data){
        this.open = true;
        this.title = "修改版本";
        this.dialogButtonName = '更 新';
        this.form = data;
        //需要强制刷新,否则el-radio无效
        this.$set(this.form,'force',`${data.force}`);
        this.getListData();
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.form.remake = this.form.remake.replace(new RegExp("\n", "gm"), "<br>");
            addVersion(this.form).then((response) => {
              if(response.code === 200){
                this.msgSuccess("新增成功");
                this.getListData();
                this.open = false;
              }
            }).catch((error) => {
              this.open = false;
            })
          }
        });
      },


      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm(
          '是否确认删除?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            deleteVersion({id:row.id})
              .then((response) => {
                if(response.code === 200){
                  this.getListData();
                  this.msgSuccess("删除成功");
                }
              })
          })
      },
      getListData() {
        listData(this.queryParams).then(resp => {
          let {code, rows,total} = resp
          if (code === 200) {
            console.log(`Data:${JSON.stringify(rows)}`);
            this.list = rows;
            this.total = total;
            this.loading = false;
          }
        })
      },

      handleClose() {
      },
    },
  };
</script>

<style scoped>
  ul, li {
    list-style: none;
  }
</style>
